import { uniSegmentedControl } from '@dcloudio/uni-ui';
import moment from 'moment';
<template>
  <view>
    <!-- 图片详情-用户信息开始 -->
    <view class="user_info">
      <view class="user_icon">
        <image :src="imgDetail.user.avatar" mode="widthFix" />
      </view>
      <view class="user_desc">
        <view class="user_name">
          {{ imgDetail.user.name }}
        </view>
        <view class="user_time">
          {{ imgDetail.newAtime }}
        </view>
      </view>
    </view>
    <!-- 图片详情-用户信息结束 -->
    <!-- 大图信息开始 -->
    <view class="high_img">
      <swiperAction @swiperAction="handlerSwiperAction">
        <image :src="imgDetail.newthumb" mode="widthFix" />
      </swiperAction>
    </view>
    <!-- 大图信息结束 -->
    <!-- 点赞开始 -->
    <view class="user_rank">
      <view class="rank">
        <text class="iconfont icon-dianzan">
          {{ imgDetail.rank }}
        </text>
      </view>
      <view class="user_collect">
        <text class="iconfont icon-shoucang"> 收藏 </text>
      </view>
    </view>
    <!-- 点赞结束 -->
    <!-- 专辑 -->
    <!-- 最热评论 -->
    <!-- 最新评论 -->
    <!-- 下载图片 开始 -->
    <view class="download">
      <view class="download_btn" @click="handlerDownload">
        下载图片
      </view>
    </view>
    <!-- 下载图片 结束 -->
  </view>
</template>

<script>
import moment from "moment";
import swiperAction from "@/components/swiperAction";
moment.locale("zh-cn");
export default {
  components: {
    swiperAction,
  },
  data() {
    return {
      //图片信息对象，包含着用户的头像信息
      imgDetail: {},
      imgIndex: 0,
      imgList: [],
    };
  },
  onLoad() {
    console.log(getApp().globalData);
    const { imgIndex } = getApp().globalData;
    this.imgIndex = imgIndex;
    this.getData();
  },
  methods: {
    async handlerDownload(){
      await uni.showLoading({
        title:"下载中"
      })
      //uni.downloadFile
      // uni.saveImageToPhotosAlbum
      // console.log(this.imgDetail);
      const result =await uni.downloadFile({
        url:this.imgDetail.thumb
      })
      // console.log(result);

      const {tempFilePath} = result[1];
      // 2将小程序中的临时文件下载到本地
      const saveResult =await uni.saveImageToPhotosAlbum({
        filePath:tempFilePath
      });
      // console.log(saveResult);
       uni.hideLoading();
       await uni.showToast({
         title:"下载成功"
       })
    },
    getData() {
      const { imgList } = getApp().globalData;
      console.log(this.imgIndex);
      this.imgDetail = imgList[this.imgIndex];
      this.imgDetail.newthumb = this.imgDetail.thumb; //+ this.imgDetail.rule.replace("$<Height>", 360);
      // ***年前的数据
      this.imgDetail.newAtime = moment(this.imgDetail.atime * 1000).fromNow();

      this.imgDetail.user = {};
      this.imgDetail.user.name = "猜测君" + this.imgIndex;
      this.imgDetail.user.avatar =
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fac%2F9a%2Ff7%2Fac9af77550e4985b113830792648d98e.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643195511&t=5861ad109d401ce38cd2b58be43d9bd0";
      // 图片详情的id
      //   this.imgDetail.id
      // this.getComments(this.imgDetail.id);
    },
    // getComments(id) {
    //   this.request({
    //     url: `http://service.picasso.adesk.com/v2/wallpaper/wallpaper/${id}/comment`,
    //   }).then((result) => {
    //     console.log(result);
    //   });
    // },
    handlerSwiperAction(event) {
      /**
       * 1、用户的左滑，相当于向下找，this.imgIndex++;
       * 2、用户的右滑，相当于向上找，this.imgIndex--;
       * 3、判断是否超过了数组的边界
       *  左滑时，同时需要小于length-1
       *  右滑时，同时需要>0
       */
      const { imgList } = getApp().globalData;
      const direction = event.direction;
      if (direction == "right" && this.imgIndex > 0) {
        this.imgIndex--;
        this.getData();
      } else if (direction == "left" && this.imgIndex < imgList.length - 1) {
        this.imgIndex++;
        this.getData();
      } else {
        uni.showToast({
          title: "没有数据了",
          icon: "none",
        });
      }
      // console.log(JSON.stringify(event));
    },
  },
};
</script>

<style lang='scss'>
.user_info {
  display: flex;
  padding: 10rpx;
  .user_icon {
    padding: 10rpx;
    image {
      width: 88rpx;
      border-radius: 50%;
    }
  }
  .user_desc {
    .user_name {
      color: #000;
      font-weight: 600;
    }
    .user_time {
      counter-reset: #ccc;
      font-size: 24rpx;
      padding: 5rpx 0;
    }
  }
}
.user_rank {
  display: flex;
  height: 80rpx;
  border-bottom: 5rpx solid #eee;
  .rank {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    .iconfont {
      padding: 4rpx;
    }
  }

  .user_collect {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    .iconfont {
    }
  }

 
}
 .download{
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .download_btn{
      width: 80%;
      height: 85%;
      background-color: $color;
      font-size: 50rpx;
      color: #fff;
      font-weight: 600;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>